<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div [hidden]="!config?.optionOpen" class="vis-tools">
  <zeppelin-visualization-pivot-setting
    [visualization]="visualization">
  </zeppelin-visualization-pivot-setting>
  <div class="line-setting">
    <label nz-checkbox [(ngModel)]="forceY" (ngModelChange)="settingChange()">Force Y to 0 </label>
    <br />
    <label nz-checkbox [(ngModel)]="lineWithFocus" (ngModelChange)="settingChange()">
      Zoom
      <small *ngIf="lineWithFocus" class="zoom-tips">Drag mouse to select the range, double-click to reset.</small>
    </label>
    <br />
    <label nz-checkbox [(ngModel)]="isDateFormat" (ngModelChange)="settingChange()">
      Date Format
      <input class="format-input"
             *ngIf="isDateFormat"
             (click)="$event.stopPropagation()"
             (blur)="settingChange()"
             (keydown.enter)="settingChange()"
             nz-input
             nzSize="small"
             placeholder="YYYY-MM-DD HH:mm"
             [(ngModel)]="dateFormat" />
    </label>
  </div>
  <zeppelin-visualization-x-axis-setting
    [visualization]="visualization"
    mode="lineChart">
  </zeppelin-visualization-x-axis-setting>
</div>
<div #container>
</div>
